<template>
    <el-form :inline="true">
        <el-form-item label="关键字">
            <el-input v-model="searchRequest.keyword" placeholder="请输入查询关键字" autocomplete="off" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSearch" v-permission="'permission:query'"> 筛选 </el-button>
            <el-button type="info" @click="onReset" v-permission="'permission:query'"> 重置 </el-button>
            <el-divider direction="vertical" />
            <el-button type="success" @click="onAdd" v-permission="'permission:add'"> 添加 </el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="permissionId" label="主键Id" width="180" />
        <el-table-column prop="permissionName" label="权限名" width="150" />
        <el-table-column prop="permissionCode" label="权限代码" width="150" />
        <el-table-column prop="type" label="类型" width="90" />
        <el-table-column prop="url" label="链接" width="*" />
        <el-table-column prop="parentId" label="上级Id" width="180" />
        <el-table-column label="操作" width="120">
            <template #default="scope">
                <el-button link type="primary" @click="onDelete(scope.row)"
                    v-permission="'permission:delete'">删除</el-button>
                <el-button link type="primary" @click="onEdit(scope.row)"
                    v-permission="'permission:edit'">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 5px" :page-size="PageConfig.PAGE_SIZE" :total="tableTotal"
        :current-page="searchRequest.pageIndex" @current-change="onPageChange" />
    <!--修改或添加弹窗-->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="400px" @close="dialogVisible = false">
        <el-form ref="permissionDataRef" :model="permissionData" :rules="rules" label-width="auto">
            <el-form-item label="权限名" prop="permissionName">
                <el-input autocomplete="off" v-model="permissionData.permissionName"
                    placeholder="请输入权限名(不超过20个字符的中文)" />
            </el-form-item>
            <el-form-item label="权限代码" prop="permissionCode">
                <el-input autocomplete="off" v-model="permissionData.permissionCode"
                    placeholder="请输入权限代码(不超过20个字符的英文)" />
            </el-form-item>
            <el-form-item label="权限类型" prop="type">
                <el-select placeholder="选择权限类型" v-model="permissionData.type" :options="options">
                </el-select>
            </el-form-item>
            <el-form-item label="url" prop="url">
                <el-input autocomplete="off" v-model="permissionData.url" placeholder="请输入url(不超过200个字符)" />
            </el-form-item>
            <el-form-item label="图标" prop="icon">
                <el-input autocomplete="off" v-model="permissionData.icon" placeholder="请输入图标字符串(不超过20个字符)" />
            </el-form-item>
            <el-form-item label="排序号" prop="order">
                <el-input type="number" autocomplete="off" v-model="permissionData.order" placeholder="请输入排序号(越小越靠前)" />
            </el-form-item>
            <el-form-item label="父级Id" prop="parentId">
                <el-input autocomplete="off" v-model="permissionData.parentId" placeholder="请输入父级Id" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onSave(permissionDataRef)"> 确定 </el-button>
            </div>
        </template>
    </el-dialog>

</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import api from '@/apis/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { DialogType, PageConfig } from '@/constant'


//筛选
const searchRequest = reactive({
    keyword: null,
    pageIndex: 1,
    pageSize: PageConfig.PAGE_SIZE
})

//表数据
const tableData = ref([])
const tableTotal = ref(0)

const options = [
    {
        value: 'menu',
        label: '菜单',
    },
    {
        value: 'operator',
        label: '操作',
    },]
//表单数据

const permissionDataRef = ref()
const permissionData = reactive({
    permissionId: null,
    permissionName: null,
    permissionCode: null,
    url: null,
    icon: null,
    order: null,
    type: 'menu',
    parentId: null
})
const rules = reactive({
    permissionName: [{ required: true, pattern: /^[\u4E00-\u9FA5]+$/, message: "请输入名称(中文)", trigger: "blur" }, { max: 20, message: "权限名称不超过20个字符", trigger: "blur" }],
    permissionCode: [{ required: true, pattern: /^[A-Za-z:]+$/, message: "请输入代码(英文)", trigger: "blur" }, { max: 20, message: "权限代码不超过20个字符", trigger: "blur" }],

});
//弹窗

const dialogTitle = ref('权限信息')
const dialogVisible = ref(false)
const dialogFlag = ref(DialogType.VIEW)//dialog模式，view、add、edit
onMounted(async () => {
    try {
        loadTable()
    } catch (error) {
        console.error('数据加载失败:', error)
    }
})

async function loadTable() {
    api.permission.pageList(searchRequest.pageIndex, PageConfig.PAGE_SIZE, searchRequest.keyword, resp => {
        tableData.value = resp.data
        tableTotal.value = resp.rows
    })
}
async function onSearch() {
    searchRequest.pageIndex = 1
    loadTable()
}
async function onReset() {
    searchRequest.keyword = null
    searchRequest.pageIndex = 1
    loadTable()
}
async function onPageChange(pageIndex) {
    searchRequest.pageIndex = pageIndex
    loadTable()
}

//删除
async function onDelete(row) {
    // console.log(row)
    ElMessageBox.confirm('确定删除?', '确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
        .then(() => {
            //确认
            api.permission.delete(row.roleId, resp => {
                onReset()
            })
        }).catch(() => {

        })
}
async function clearForm() {
    permissionData.permissionId = null
    permissionData.permissionName = null
    permissionData.permissionCode = null
    permissionData.url = null
    permissionData.icon = null
    permissionData.order = null
    permissionData.type = 'menu'
    permissionData.parentId = null
}
//添加
async function onAdd() {
    dialogTitle.value = '添加权限'
    dialogFlag.value = DialogType.ADD
    clearForm()
    dialogVisible.value = true
}
//修改
async function onEdit(row) {
    dialogTitle.value = '修改权限信息'
    dialogFlag.value = DialogType.EDIT

    permissionData.permissionId = row.permissionId
    permissionData.permissionName = row.permissionName
    permissionData.permissionCode = row.permissionCode
    permissionData.url = row.url
    permissionData.icon = row.icon
    permissionData.order = row.order
    permissionData.type = row.type
    permissionData.parentId = row.parentId

    dialogVisible.value = true
}

//保存
async function onSave(formEl) {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (dialogFlag.value == DialogType.ADD) {
                //添加
                api.permission.add(permissionData.permissionName, permissionData.permissionCode, permissionData.url, permissionData.icon, permissionData.order, permissionData.type, permissionData.parentId, resp => {
                    clearForm()
                    ElMessage('添加成功')
                    onReset()//重新加载
                    dialogVisible.value = false
                })
            }
            else {
                //修改
                api.permission.edit(permissionData.permissionId, permissionData.permissionName, permissionData.permissionCode, permissionData.url, permissionData.icon, permissionData.order, permissionData.type, permissionData.parentId, resp => {
                    clearForm()
                    ElMessage('修改成功')
                    onReset()//重新加载
                    dialogVisible.value = false
                })
            }
        }
    })
}

</script>
